<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插入换行</title>
    <link rel="stylesheet" href="../public.css">
    <style>
        .box{
            width: 80%;
            border: 1px black solid;
            padding: 20px;
            margin: 20px auto;
            text-align: center;
        }
         dt,dd{
            display: inline;
        }
         dd{
            margin: 0;
            font-weight: bold;
        }
        .back1 dd::after{
            content:"\A";
            white-space: pre;
        }
        .back dd+dt::before{
            content: "\A";
            white-space: pre;
        } 
        .back dd+dd::before{
            content: ",";
            white-space: normal;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>连字符断行</h1>
        <ul>
            <li>
               默认情况下，这些换行符会与相邻的其他空白符进行合并，保留源代码中的这些空白符和换行符white-space:pre;
            </li>
        </ul>
        <div class="box  back1">
            <dl>
                <dt>Name:</dt>
                <dd>Lea Verou</dd>
                <dt>Email:</dt>
                <dd>lea@verou.me</dd>
                <dt>Location:</dt>
                <dd>Earth</dd>
            </dl>
        </div>
        <div class="box back ">
            <dl>
                <dt>Name:</dt>
                <dd>Lea Verou</dd>
                <dt>Email:</dt>
                <dd>lea@verou.me</dd><dd>lea@verou.me</dd>
                <dt>Location:</dt>
                <dd>Earth</dd>
                <dd>Earth</dd>
                <dd>Earth</dd>
            </dl>
        </div>
    </div>
</body>

</html>